<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-06-29 14:43:42
 * @FilePath: /src/views/dataManagement/system/user/components/UserRulesData.vue
 * @LastEditTime: 2021-07-21 14:20:12
 * @LastEditors: luojiajun
-->
<template>
    <div class="user-rules-data">
        <el-row>
            <el-col :span="24">
                <!-- <h3 class="authTitle">权限分配</h3> -->
                <div class="auth">
                    <!-- 权限查询 -->
                    <el-form :inline="true" :model="ruleForm"  ref="ruleForm">
                        <el-form-item label="名称关键字" prop="name">
                            <el-input placeholder="请输入内容" v-model.trim="ruleForm.name" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="权限类型" prop="type">
                            <el-select placeholder="请选择权限类型" v-model="ruleForm.type" clearable>
                                <el-option :value="'000'" label="无权限"></el-option>
                                <el-option :value="1" label="只读"></el-option>
                                <el-option :value="2" label="可读可导出"></el-option>
                                <el-option :value="3" label="内容编辑"></el-option>
                                <el-option :value="4" label="元数据编辑"></el-option>
                                <el-option :value="5" label="是否管理"></el-option>
                            </el-select>
                        </el-form-item>	
                        <el-button @click="handleAuthTreeExpand" :disabled="!inputValue.length">{{ !authTreeExpand ? '全部展开' : '全部折叠'}}</el-button>
                        <el-button icon="el-icon-s-operation" style="margin-left:10px;" @click="authReset"></el-button>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                        <el-button v-if="isEdit" type="primary" icon="el-icon-edit" @click="readonly = !readonly">{{ readonly ? '编辑数据权限' : '关闭数据编辑'}}</el-button>
                    </el-form>

                    <!-- 树形结构 -->
                    <div style="border:1px solid #e6e6e6;">
                        <div class="auth-header">
                            <span class="auth-th t1">数据库表单目录</span>
                            <!-- <span class="auth-th t2">表单字段配置</span> -->
                            <span class="auth-th t3">无权限</span>
                            <span class="auth-th t3">只读</span>
                            <span class="auth-th t3">可读可导出</span>
                            <span class="auth-th t3">内容编辑</span>
                            <span class="auth-th t3">元数据编辑</span>
                            <span class="auth-th t3">是否管理</span>
                        </div>
                        <el-tree ref="authTree" :data="inputValue" default-expand-all node-key="uniqueid" :filter-node-method="filterNode" class="edit-tree" :empty-text="emptyTreeText" v-loading="treeLoading" :expand-on-click-node="false">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ data.dirName }}</span>
                                <span >
                                    <!-- <a href="javascript:;" class="auth-th t2">权限配置</a>  -->
                                    <el-radio-group v-model="data.accessType" :disabled="readonly"  v-if="data.isTable" @change="(value)=>{filterSelect(data,value,node)}">
                                        <el-radio class="auth-th t3" :label="'000'">{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="1">{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="2">{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="3">{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="4">{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="5">{{''}}</el-radio>
                                    </el-radio-group>
                                    <el-radio-group v-model="data.accessType" :disabled="readonly"  v-else-if="data.children&&data.children.length>0" @change="(value)=>{filterSelect(data,value,node)}">
                                        <el-radio class="auth-th t3" :label="'000'">全选{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="1">全选{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="2">全选{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="3">全选{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="4">全选{{''}}</el-radio>
                                        <el-radio class="auth-th t3" :label="5">全选{{''}}</el-radio>
                                    </el-radio-group>
                                    <template v-else>
                                        <div class="el-radio-group">
                                            <span class="auth-th t3 placeholder" v-for="i in 5" :key="i"></span>
                                        </div>
                                    </template>
                                </span>
                            </span>
                        </el-tree>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { flatten } from "@/utils/ruoyi";

export default {
    name: 'UserRulesData',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: Array,
            default: () => {
                return []
            }
        },
        treeLoading: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            authTreeExpand: true,
            ruleForm: {
                name: '',
                type: ''
            },
            readonly: true
        }
    },
    watch: {
        inputValue(value) {
            if (value) {
                this.$nextTick(() => {
                    this.$refs.authTree.filter({ selectAll: true })
                })
            }
        },
        isEdit: {
            handler: function (value) {
                this.readonly = value
            },
            immediate: true
        }
    },
    computed: {
        inputValue: {
            get() {
                return this.value;
            },
            set(newValue) {
                this.$emit("change", newValue);
            },
        },
        // 数据权限空文案
        emptyTreeText() {
            return !this.inputValue.length ? '暂无数据' : '请先选择分组'
        },
    },
    methods: {
        // 权限列表查询
        handleQuery() {
            this.$refs.authTree.filter(this.ruleForm)
        },
        handleAuthTreeExpand() {
            if (!this.$refs.authTree) return

            this.authTreeExpand = !this.authTreeExpand
            let treeData = flatten(this.inputValue);
            for (let i = 0; i < treeData.length; i++) {
                if (treeData[i].children.length) {
                    this.$refs.authTree.store.nodesMap[treeData[i].uniqueid].expanded = this.authTreeExpand;
                }
            }
        },
        // 展示全部
        authReset() {
            this.$refs.ruleForm.resetFields()
            this.$refs.authTree.filter('')
        },
        filterNode(value, data, node) {
            if (value.selectAll) {
                this.changeParent(data.accessType, node)
                return true
            }
            else if (!value.name && !value.type || value == '') {
                return true
            } else {
                return this.checkBelongToChooseNode(value, data, node);
            }
        },
        // 判断传入的节点是不是选中节点的子节点
        checkBelongToChooseNode(value, data, node) {
            let label = "dirName"
            if (value.name && value.type && data[label].indexOf(value.name) !== -1 && data.accessType != null && data.accessType.toString().indexOf(value.type) !== -1) {
                return true;
            } else if (value.name && data[label].indexOf(value.name) !== -1 && !value.type) {
                return true
            } else if (value.type && data.accessType != null && data.accessType.toString().indexOf(value.type) !== -1 && !value.name) {
                return true
            }
            const level = node.level;
            // 如果传入的节点本身就是一级节点就不用校验了
            if (level === 1) {
                return false;
            }
            // 先取当前节点的父节点
            let parentData = node.parent;
            // 遍历当前节点的父节点
            let index = 0;
            while (index < level - 1) {
                // 如果匹配到直接返回
                if (value.name && parentData.data[label].indexOf(value.name) !== -1 && value.type && parentData.data.accessType != null && parentData.data.accessType.toString().indexOf(value.type) !== -1) {
                    // if (parentData.data[label].indexOf(value) != -1) {
                    return true;
                } else if (value.name && parentData.data[label].indexOf(value.name) !== -1 && !value.type) {
                    return true
                } else if (value.type && parentData.data.accessType != null && parentData.data.accessType.toString().indexOf(value.type) !== -1 && !value.name) {
                    return true
                }
                // 否则的话再往上一层做匹配
                parentData = parentData.parent;
                index++;
            }
            // 没匹配到返回false
            return false;
        },
        // 过滤筛选
        filterSelect(data, value, node) {
            data.accessType = value
            if (node && node.parent) {
                this.changeParent(value, node)

            }
            if (data.children && data.children.length > 0) {
                data.children.forEach(item => {
                    this.filterSelect(item, value)
                })
            }
        },
        changeParent(value, node) {
            if (node.data.isTable) {
                if (node.parent.childNodes.every(item => {
                    return item.data.accessType == value
                })) {
                    node.parent.data.accessType = value
                } else {
                    node.parent.data.accessType = ''
                }
            } else {
                if (node.parent.childNodes.every(item => {
                    // console.log("aaa:", item.data)
                    return item.data.children && item.data.children.length == 0 || item.data.accessType == value
                })) {
                    node.parent.data.accessType = value
                } else {
                    node.parent.data.accessType = ''
                }
            }

            if (node.parent.parent) {
                this.changeParent(value, node.parent)
            }
        },
    }
}
</script>

<style lang="scss" scoped>
    .auth {
		padding: 10px 0;
		.auth-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding-right: 8px;
			background: #f5f6fa;
			border-bottom: 1px solid #e6e6e6;
			.auth-th {
				border-left: 1px solid #e6e6e6;
				line-height: 50px;
				color: #1e1e1e;
				font-size: 16px;
			}
			.auth-th:first-child {
				border-left: none;
			}
		}
		.auth-th {
			display: inline-block;
			text-align: center;
			margin-right: 0px;
		}
		.t1 {
			flex: 1;
		}
		.t2 {
			width: 240px;
			color: #1183f8;
		}
		.t3 {
			width: 100px;

            &.placeholder {
                height: 40px;
                line-height: 40px;
                border-left: 1px solid rgb(230, 230, 230);
            }
		}

        .el-radio-group {
            .t3 {
                height: 40px;
                line-height: 40px;
                border-left: 1px solid rgb(230, 230, 230);
            }
        }
		::v-deep.el-tree-node__content {
			// margin: 4px 0px;
            padding: 8px 0;
            height: 40px;
            line-height: 40px;
		}
	}
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		// padding-right: 8px;
		font-size: 16px;
		font-weight: 400;
		color: #1e1e1e;
        border-bottom: 1px solid rgb(230, 230, 230);
	}
	::v-deep.el-radio {
        .el-radio__inner {
            border-radius: 0;
        }
        .el-radio__input.is-checked {

            &.is-disabled {
                .el-radio__inner {
                    background-color: #c6d5ec;
                }
            } 

            .el-radio__inner {
                &::after {
                    content: "";
                    position: absolute;
                    left: 2px;
                    top: 3px;
                    width: 9px;
                    height: 5px;
                    border: 2px solid #fff;
                    border-radius: 1px;
                    border-top: none;
                    border-right: none;
                    background: transparent;
                    transform: rotate(-45deg);
                }
            }
        }
		
	}
	.edit-tree {
		padding: 0;

        ::v-deep {
            .el-tree-node:last-child {
                .custom-tree-node {
                    margin-bottom: 2px;
                }
            }
        }
	}
    
	::v-deep.el-form-item {
		padding-right: 10px;
	}
</style>